<template>
  <!-- 登录信息录入区域 -->
  <div class="login_panel" ref="login_panel" :style="{'padding-top': topHeight}">
    <!-- 顶部标题 -->
    <div class="panel_title">融资服务大厅</div>
    <div class="panel_info">
      <img src="../../assets/img/login/info.png" class="img_info">
      <div class="info_content">请使用Hi乐租账号、密码登录。</div>
    </div>
    <!-- 录入信息区域 -->
    <el-form
      class="panel_form"
      :label-position="labelPosition"
      :model="dataForm"
      :rules="rules"
      ref="dataForm"
    >
      <!-- 用户名 -->
      <el-form-item prop="userName" class="login_input">
        <el-input v-model="dataForm.userName" placeholder="请输入用户名"/>
      </el-form-item>
      <!-- 登录密码 -->
      <el-form-item prop="loginPwd" class="login_input">
        <el-input type="password" v-model="dataForm.loginPwd" placeholder="请输入登录密码"/>
      </el-form-item>
      <!-- 验证码 -->
      <el-form-item v-if="isShow" prop="checkCode" class="login_input">
        <el-row type="flex" align="middle">
          <el-col :span="18">
            <el-input v-model="dataForm.checkCode" placeholder="请输入验证码" maxlength="4"/>
          </el-col>
          <el-col :span="5" :offset="2">
            <div>
              <img class="img_code" :src="imgcode" @click="getImgCode">
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 登录按钮 -->
      <el-form-item>
        <el-button @click.prevent="login">登录</el-button>
      </el-form-item>
    </el-form>
    <!-- 底部内容 -->
    <div class="panel_bottom">
      <span>联系客服</span>
    </div>
  </div>
</template>

<script>
import SecurityUtil from '@/utils/security'
import { mapActions } from 'vuex'
import YT from '@/utils/YT'
export default {
  data () {
    return {
      labelPosition: 'top',
      imgcode: '',
      isShow: false,
      topHeight: '',
      dataForm: {
        userName: '',
        loginPwd: '',
        checkCode: ''
      },
      rules: {
        userName: [{
          required: true,
          type: 'string',
          trigger: 'blur',
          message: '请输入登录用户名!'
        }],
        loginPwd: [{
          required: true,
          type: 'string',
          trigger: 'blur',
          message: '请输入登录密码!'
        }],
        checkCode: [{
          required: true,
          type: 'string',
          trigger: 'blur',
          message: '请输入验证码!'
        }, {
          validator: (rule, value, callback) => {
            if (value.length !== 4) {
              callback(new Error('请输入正确的验证码!'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }
    }
  },
  mounted () {
    this.topHeight = window.innerHeight / 2 - this.$refs.login_panel.offsetHeight / 2 + 'px'
  },
  methods: {
    ...mapActions('userstore', ['setUser']),
    getImgCode () {
      this.$http.post('/common/ImageCode', {}, (rpdata) => {
        if (rpdata.STATUS === '1') {
          this.imgcode = 'data:image/png;base64,' + rpdata.IMG_CODE
        } else {
          YT.alertInfo(rpdata.MSG)
        }
      }
      )
    },
    login () {
      this.$refs['dataForm'].validate((validate) => {
        if (validate) {
          this.$http.post('/login/userLogin', {
            ENCRYPT_TYPE: '1',
            LOGIN_ID: this.dataForm.userName,
            LOGIN_PWD: SecurityUtil.md5Encrypt(this.dataForm.loginPwd),
            IMAGE_CODE: this.dataForm.checkCode
          }, (rpdata) => {
            if (rpdata.STATUS === '1') {
              // 登录成功后业务处理
              // 存储用户信息
              this.setUser({
                loginFlag: true,
                userName: 'YiTong',
                userId: '100000',
                userRole: '1100'
              })
              // 跳转首页
              this.$router.push({ name: 'main' })
            } else {
              YT.alertInfo(rpdata.MSG)
              // 登录失败，清空输入数据，刷新验证码
              this.$refs['dataForm'].resetFields()
              this.getImgCode()
              this.isShow = true
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/css/login/login.scss";
</style>
